<!--
 * @Author: 王灿
 * @Date: 2019-11-09 00:40:05
 * @LastEditTime: 2020-03-18 19:27:24
 * @Description: 国际订单
 * @FilePath: \scarlet-sparrow-admin\src\views\order\order-internetion\index
-->
<template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- 导出 -->
    <!-- <form id="ajaxForm" method="post" enctype="multipart/form-data" class="public-export">
      <el-button type="danger" size="mini" @click="onExport">导出</el-button>
    </form> -->
    <!-- fun btn -->
    <div class="public-search">
      <el-form>
        <el-input v-model="userId" placeholder="用户ID" clearable></el-input>
        <el-input v-model="orderId" placeholder="订单ID" clearable></el-input>
        <el-input v-model="customerName" placeholder="购买人姓名" clearable></el-input>
        <el-input v-model="productName" placeholder="商品名称" clearable></el-input>
      </el-form>
    </div>
    <!-- 订单列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 用户ID -->
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <!-- 订单ID -->
        <el-table-column prop="orderId" label="订单ID"></el-table-column>
        <!-- 购买人姓名 -->
        <el-table-column prop="customerName" label="购买人姓名"></el-table-column>
        <!-- 身份证号 -->
        <el-table-column prop="idCard" label="身份证号"></el-table-column>
        <!-- 商品ID -->
        <el-table-column prop="productId" label="商品ID"></el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="productName" label="商品名称"></el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import { getOrderInternetion } from '@/api/order.js'
import { getProductList } from '@/api/commodity.js'
export default {
  name: 'Order',
  components: {
    JqTitle,
    JqTooltip,
    JqPage
  },
  data() {
    return {
      title: { label: '国际订单', flag: false, searchFlag: false },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      productData: [],
      total: 0,
      orderId: '',
      productName: '',
      userId: '',
      customerName: ''
    }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetOrderList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetOrderList()
    },
    userId() {
      this.pageNum = 1
      this.OnGetOrderInternetion()
    },
    orderId() {
      this.pageNum = 1
      this.OnGetOrderInternetion()
    },
    customerName() {
      this.pageNum = 1
      this.OnGetOrderInternetion()
    },
    productName() {
      this.pageNum = 1
      this.OnGetOrderInternetion()
    }
  },
  created() {
    this.OnGetOrderInternetion()
  },
  methods: {
    // 订单数据
    OnGetOrderInternetion() {
      getOrderInternetion({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userId: this.userId,
        orderId: this.orderId,
        customerName: this.customerName,
        productId: this.productName
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 导出
    onExport() {
      getExportToken().then(res => {
        this.$message({
          type: 'success',
          message: '导出成功',
          onClose: () => {
            let temp = document.createElement('form')
            temp.action =
              'https://api.jiaque365.com:8087/excel/order?token=' + res.data
            temp.method = 'post'
            temp.style.display = 'none'
            document.body.appendChild(temp)
            temp.submit()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.public {
  .public-table__status-wrapper {
    width: 100%;
    height: 100%;
    @include row;
    span {
      &:first-child {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
      }
      &.public-table__status-first {
        background: #fe5c5c;
      }
      &.public-table__status-second {
        background: #e6a23c;
      }
      &.public-table__status-third {
        background: #909399;
      }
      &.public-table__status-fourth {
        background: #409eff;
      }
      &.public-table__status-fifth {
        background: #96b327;
      }
    }
  }
  .public-export {
    padding-left: 10px;
  }
}
</style>
